<template>
<!-- vip -->
<div class="vip-area">
    <!-- header -->
    <head-usual to="/" title="企业会员权益"></head-usual>
    <mt-navbar v-model="selected">
        <mt-tab-item id="1">普通用户</mt-tab-item>
        <mt-tab-item id="2">会员用户</mt-tab-item>
    </mt-navbar>

<!-- tab-container -->
<mt-tab-container v-model="selected">
    <mt-tab-container-item id="1">
        <div class="normal-level">
             <div class="service-item">
                <div class="item-left">
                    <h2>红色昵称</h2>
                    <p>说明：会员用户可享受尊贵红色昵称，与众不同</p>
                </div>
                 <div class="item-right wu">
                  <svg class="icon icon-jia" aria-hidden="true" >
                        <use xlink:href="#icon-17cuowu"></use>
                    </svg>
                </div>
            </div>
             <div class="service-item">
                <div class="item-left">
                    <h2>会员图标</h2>
                    <p>说明：会员用户可点亮会员图标，尊贵无处不在</p>
                </div>
                 <div class="item-right wu">
                   <svg class="icon icon-jia" aria-hidden="true" >
                        <use xlink:href="#icon-17cuowu"></use>
                    </svg>
                </div>
            </div>
            <div class="service-item">
                <div class="item-left">
                    <h2>充值折扣</h2>
                    <p>说明：会员用户充值筑功币可享受9.1折优惠</p>
                </div>
                 <div class="item-right wu">
                   <svg class="icon icon-jia" aria-hidden="true" >
                        <use xlink:href="#icon-17cuowu"></use>
                    </svg>
                </div>
            </div>
            <div class="service-item">
                <div class="item-left">
                    <h2>我的服务</h2>
                    <p>说明：会员用户可以开通“我的服务”，利用知识变现</p>
                </div>
                 <div class="item-right wu">
                   <svg class="icon icon-jia" aria-hidden="true" >
                        <use xlink:href="#icon-17cuowu"></use>
                    </svg>
                </div>
            </div>
              <div class="service-item">
                <div class="item-left">
                    <h2>发布职位</h2>
                    <p>通过筑功者平台发布职位需求</p>
                </div>
                <div class="item-right">
                 每月免费发布3个职位（有效期3个月)
                </div>
            </div>
             <div class="service-item">
                <div class="item-left">
                    <h2>下载简历</h2>
                    <p>通过筑功者平台下载用户简历</p>
                </div>
                <div class="item-right">
                20元
                </div>
            </div>
            <div class="service-item">
                <div class="item-left">
                    <h2>发布项目</h2>
                    <p>在筑功者平台发布项目</p>
                </div>
                <div class="item-right">
                  25元
                </div>
            </div>
             <div class="service-item">
                <div class="item-left">
                    <h2>承揽项目</h2>
                    <p>在筑功者平台承揽项目</p>
                </div>
                <div class="item-right wu">
                    <svg class="icon icon-jia" aria-hidden="true" >
                        <use xlink:href="#icon-17cuowu"></use>
                    </svg>
                </div>
            </div>
            <div class="service-item">
                <div class="item-left">
                    <h2>付费咨询收益</h2>
                    <p>说明：筑功者会员通过付费，资讯赚的收益</p>
                </div>
                 <div class="item-right wu">
                    <svg class="icon icon-jia" aria-hidden="true" >
                        <use xlink:href="#icon-17cuowu"></use>
                    </svg>
                </div>

            </div>
            <div class="service-item">
                <div class="item-left">
                    <h2>广告付费</h2>
                    <p>说明：可以在筑功者平台发布宣传广告</p>
                </div>
                 <div class="item-right">
                 通过点击率付费
                </div>

            </div>
            <div class="service-item">
                <div class="item-left">
                    <h2>晒场分成</h2>
                    <p>说明：通过筑功者晒场上传自己的展示，获得的赞赏收益。</p>
                </div>
                 <div class="item-right">
                  用户可获得50%收益
                </div>

            </div>
            <div class="service-item">
                <div class="item-left">
                    <h2>推广大使</h2>
                    <p>说明：会员用户可享受推广大使奖励政策。</p>
                </div>
                 <div class="item-right wu">
                   <svg class="icon icon-jia" aria-hidden="true" >
                        <use xlink:href="#icon-17cuowu"></use>
                    </svg>
                </div>
            </div>
             <div class="service-item">
                <div class="item-left">
                    <h2>会员费</h2>
                    <p>说明：加入会员可享受以上权益</p>
                </div>
                 <div class="item-right wu">
                    <svg class="icon icon-jia" aria-hidden="true" >
                        <use xlink:href="#icon-17cuowu"></use>
                    </svg>
                </div>
            </div>
            <div class="explain">注释：铜牌筑功者、银牌筑功者、金牌筑功者享受的权益不同，平台依据个人资质进行初始评级，加入会员后根据成长值可升级到更高的会员级别； 
                可以在已购买时长到期前一个月进行续费，如果已购买时长过期可以重新购买。</div>
        </div>
        <div class="vip-bottom">
             <h1>企业会员开通</h1>
            <div class="vip-bg" v-if="id==1">
                <img src="~@/assets/vip-bg.jpg"/>
            </div>
            <div class="vip-bg" v-if="id==2">
                <img src="~@/assets/yinpai.jpg"/>
            </div>
            <div class="vip-bg" v-if="id==3">
                <img src="~@/assets/tongpai.jpg"/>
            </div>
            <p class="buy-title">购买时长:</p>
            <div class="check-list">
                <div class="check-item">
                <div @click="handleCheck(1)" :class="id==1?'active':''">一年：{{nianVIPPrice}}元
                     <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-gouxuan"></use>
                    </svg>
                </div>
                
                </div>
                <div class="check-item">
                    <div  @click="handleCheck(2)" :class="id==2?'active':''">一季度：{{jiduVIPPrice}}元
                        <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-gouxuan"></use>
                        </svg>
                    </div>
                    <!-- <p>节省103元，<span>原价<i>468元</i></span></p> -->
                </div>
                <div class="check-item">
                    <div  @click="handleCheck(3)" :class="id==3?'active':''">一月：{{yueVIPPrice}}元
                        <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-gouxuan"></use>
                        </svg>
                    </div>
                
                </div>
            </div>
            <p class="should-pay">应付金额：<span>{{nianVIPPrice}}</span>元</p>
            <button @click="BuyOk">确认加入筑功者</button>
        </div>
    </mt-tab-container-item>
    <mt-tab-container-item id="2">
       <div class="normal-level level-vip">
            <div class="service-item">
                <div class="item-left">
                    <h2>红色昵称</h2>
                    <p>说明：会员用户可享受尊贵红色昵称，与众不同</p>
                </div>
                 <div class="item-right free">
                    <svg class="icon icon-jia" aria-hidden="true" >
                        <use xlink:href="#icon-gou"></use>
                    </svg>
                </div>
            </div>
            <div class="service-item">
                <div class="item-left">
                    <h2>会员图标</h2>
                    <p>说明：会员用户可点亮会员图标，尊贵无处不在</p>
                </div>
               <div class="item-right free">
                    <svg class="icon icon-jia" aria-hidden="true" >
                        <use xlink:href="#icon-gou"></use>
                    </svg>
                </div>
            </div>
              <div class="service-item">
                <div class="item-left">
                    <h2>充值折扣</h2>
                    <p>说明：会员用户充值筑功币可享受9.1折优惠</p>
                </div>
              <div class="item-right free">
                    <svg class="icon icon-jia" aria-hidden="true" >
                        <use xlink:href="#icon-gou"></use>
                    </svg>
                </div>
            </div>
            <div class="service-item">
                <div class="item-left">
                    <h2>付费咨询费</h2>
                    <p>说明：用户可以向“筑功者”进行付费资讯</p>
                </div>
                 <div class="item-right">
                   铜牌8折、银牌7折、金牌6折
                </div>

            </div>
              <div class="service-item">
                <div class="item-left">
                    <h2>我的服务</h2>
                    <p>说明：会员用户可以开通“我的服务”，利用知识变现</p>
                </div>
               <div class="item-right free">
                    <svg class="icon icon-jia" aria-hidden="true" >
                        <use xlink:href="#icon-gou"></use>
                    </svg>
                </div>
            </div>
            <div class="service-item">
                <div class="item-left">
                    <h2>发布职位</h2>
                    <p>通过筑功者平台发布职位需求</p>
                </div>
              <div class="item-right free">
                    <svg class="icon icon-jia" aria-hidden="true" >
                        <use xlink:href="#icon-gou"></use>
                    </svg>
                </div>
            </div>
             <div class="service-item">
                <div class="item-left">
                    <h2>下载简历</h2>
                    <p>通过筑功者平台下载用户简历</p>
                </div>
                 <div class="item-right">
                  铜牌5折、银牌4折、金牌3折
                </div>
            </div>

            <div class="service-item">
                <div class="item-left">
                    <h2>发布项目</h2>
                    <p>在筑功者平台发布项目</p>
                </div>
              <div class="item-right free">
                    <svg class="icon icon-jia" aria-hidden="true" >
                        <use xlink:href="#icon-gou"></use>
                    </svg>
                </div>
            </div>
             <div class="service-item">
                <div class="item-left">
                    <h2>承揽项目</h2>
                    <p>在筑功者平台承揽项目</p>
                </div>
              <div class="item-right free">
                    <svg class="icon icon-jia" aria-hidden="true" >
                        <use xlink:href="#icon-gou"></use>
                    </svg>
                </div>
            </div>
            <div class="service-item">
                <div class="item-left">
                    <h2>广告付费</h2>
                    <p>说明：可以在筑功者平台发布宣传广告</p>
                </div>
                 <div class="item-right">
                  铜牌8折、银牌7折、金牌6折
                </div>

            </div>
            <div class="service-item">
                <div class="item-left">
                    <h2>晒场分成</h2>
                    <p>说明：通过筑功者晒场上传自己的展示，获得的赞赏收益。</p>
                </div>
                 <div class="item-right">
                  用户可获得80%收益
                </div>

            </div>
            <div class="service-item">
                <div class="item-left">
                    <h2>推广大使</h2>
                    <p>说明：会员用户可享受推广大使奖励政策。</p>
                </div>
                <div class="item-right free">
                    <svg class="icon icon-jia" aria-hidden="true" >
                        <use xlink:href="#icon-gou"></use>
                    </svg>
                </div>
            </div>
             <div class="service-item">
                <div class="item-left">
                    <h2>会员费</h2>
                    <p>说明：加入会员可享受以上权益</p>
                </div>
                 <div class="item-right">
                   {{yueVIPPrice}}元/月 {{jiduVIPPrice}}元/季度 {{nianVIPPrice}}/年
                </div>

            </div>
             <div class="explain">注释：铜牌筑功者、银牌筑功者、金牌筑功者享受的权益不同，平台依据个人资质进行初始评级，
                 加入会员后根据成长值可升级到更高的会员级别； 可以在已购买时长到期前一个月进行续费，如果已购买时长过期可以重新购买。</div>
        </div>
        <div class="vip-bottom">
             <h1>企业会员开通</h1>
            <div class="vip-bg" v-if="id==1">
                <img src="~@/assets/vip-bg.jpg"/>
            </div>
            <div class="vip-bg" v-if="id==2">
                <img src="~@/assets/yinpai.jpg"/>
            </div>
            <div class="vip-bg" v-if="id==3">
                <img src="~@/assets/tongpai.jpg"/>
            </div>
            <p class="buy-title">购买时长:</p>
            <div class="check-list">
                <div class="check-item">
                <div @click="handleCheck(1)" :class="id==1?'active':''">一年：{{nianVIPPrice}}元
                     <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-gouxuan"></use>
                    </svg>
                </div>
                
                </div>
                <div class="check-item">
                    <div  @click="handleCheck(2)" :class="id==2?'active':''">一季度：{{jiduVIPPrice}}元
                        <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-gouxuan"></use>
                        </svg>
                    </div>
                    <!-- <p>节省103元，<span>原价<i>468元</i></span></p> -->
                </div>
                <div class="check-item">
                    <div  @click="handleCheck(3)" :class="id==3?'active':''">一月：{{yueVIPPrice}}元
                        <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-gouxuan"></use>
                        </svg>
                    </div>
                
                </div>
            </div>
            <p class="should-pay">应付金额：<span>{{nianVIPPrice}}</span>元</p>
               <button @click="BuyOk">确认加入筑功者</button>
        </div>
    </mt-tab-container-item>
</mt-tab-container>
</div>
    
</template>
<script>
import headUsual from "@/pages/components/headUsual";
import {GetUserInedx } from "@/api/user/index";
import { Navbar, TabItem,MessageBox } from "mint-ui";
export default {
  data() {
    return {
      selected: "1",
      vipImg:"~/assets/vip-bg.jpg",
      vipPrice:365,
	  nianVIPPrice:365,
	  jiduVIPPrice:99,
	  yueVIPPrice:39,
      UserInfo: "",
      MIcon: "",
      InfoAmount: "",
      id:1,
      idx:1,
       type:1,
       userState:{
        isvip:false,
       isPublic:false,
      }
    };
  },
  created(){
    this.id = this.$store.state.userinfo.id;
       //获取是否为vip
   GetUserInedx().then(res => {
          if (res.StatusCode === 200) {
            this.UserInfo = res.Data.UserInfo;
            this.MIcon = res.Data.MIcon;
            this.InfoAmount = res.Data.InfoAmount;
            console.log(this.UserInfo)

            if(this.UserInfo.isIdentity)
            {
                this.nianVIPPrice=(this.nianVIPPrice*0.5);
                this.jiduVIPPrice=(this.jiduVIPPrice*0.5);
                this.yueVIPPrice=(this.yueVIPPrice*0.5);
            }
          }
        });
  },
  methods:{
      //会员选择套餐种类
      handleCheck(item){
          this.id=item;
         switch (item) {
             case 1:
                 {
                     this.vipImg="~@/assets/vip-bg.jpg";
                     this.vipPrice=this.nianVIPPrice
                 }
                 break;
         case 2:{
             this.vipImg="~@/assets/yinpai.jpg";
             this.vipPrice=this.jiduVIPPrice
         }break;
          case 3:{
             this.vipImg="~@/assets/tongpai.jpg";
             this.vipPrice=this.yueVIPPrice
         }break;
             default:
                 break;
         }
      },
      BuyOk(){
          if(this.$store.state.userinfo.id==0||this.$store.state.userinfo.id==undefined){
                this.$router.push({ path: "/auth/login" });
                return false;
          }
          if(this.userState.isvip){
            MessageBox.confirm("您已经是筑功者会员了，是否要继续购买（继续购买时长会叠加）?").then(action => {
               var url=`http://www.zhugongzhe.com/OAuth2/wx/?uid=${this.$store.state.userinfo.id}&type=0&expandId=${this.type}&price=${this.vipPrice}&backurl=http://m.zhugongzhe.com/user`;
               window.location.href=url;
            });
          }
          else{
            var url=`http://www.zhugongzhe.com/OAuth2/wx/?uid=${this.$store.state.userinfo.id}&type=0&expandId=${this.type}&price=${this.vipPrice}&backurl=http://m.zhugongzhe.com/user`;
            window.location.href=url;
          }
      }
  },
  components: { headUsual }
};
</script>

<style lang="scss" scoped>
$color: #ff6900;
.mint-navbar {
  width: 278.6px;
  margin: 0 auto 5px;
  display: flex;
  justify-content: space-between;
}
.mint-navbar .mint-tab-item {
  flex: 0 0 23%;
}
.mint-navbar .mint-tab-item.is-selected {
  border-bottom: 2px solid $color;
  color: $color;
  margin-bottom: 2px;
}

// 普通会员
.normal-level {
  padding: 0 12px;
  border-bottom: 10px solid #f6f6f6;
  .service-item {
    height: 100px;
    margin-top: 8px;
    box-shadow: 0 0 10px rgba(50,50,50, 0.2);
    padding: 16px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .item-left {
      width: 168px;
      h2 {
        font-size: 18px;
        color: #159bfe;
      }
      p {
        font-size: 12px;
        color: #999;
        margin-top: 10px;
      }
    }
    .item-right {
      font-size: 14px;
      color: #282828;
      width: 175px;
      position: relative;
      padding-left: 18px;
    }
    .wu{
        color:#666;
        display: flex;
        align-items: center;
    }
    .free{
color: #fd4f00 !important;
    font-size: 0.434783rem;
    font-weight: 600;
    }
    .item-right::before {
      content: "";
      width: 1px;
      height: 18px;
      background: #999;
      position: absolute;
      left: 0;
      top: 50%;
      margin-top: -9px;
    }
  }
}
.level-vip {
  h2 {
    color: $color !important;
  }
}
// 注释
.explain {
  font-size: 12px;
  color: #999;
  margin-top: 11px;
  margin-bottom: 14px;
}
.vip-area {
  .vip-bottom {
    padding: 0 12px;
    h1 {
      font-size: 16px;
      text-align: center;
      color: $color;
      height: 43px;
      line-height: 43px;
    }
    .vip-bg {
      border-radius: 5px;
      overflow: hidden;
      width: 390px;
      height: 162.3px;
      img {
        width: 100%;
        height: auto;
      }
    }
    .buy-title {
      font-size: 14px;
      color: #999;
      margin-top: 25px;
      margin-bottom: 18px;
    }
    .check-list {
      overflow: hidden;
    }
    .check-item {
      float: left;
      margin-right: 10px;
      margin-bottom: 18px;
      div {
        width: 190px;
        height: 47.33px;
        line-height: 47.33px;
        text-align: center;
        font-size: 14px;
        color: #666;
        border: 1px solid #dcdcdc;
        position: relative;
        .icon {
          position: absolute;
          right: -2px;
          bottom: -2px;
        }
      }
      .active{
          border-color: #f66626;
          .icon{
              color:#f66626;
          }
      }
      p {
        font-size: 12px;
        text-align: center;
        color: #f66626;
        margin-top: 8px;
        span {
          color: #999;
          i {
            text-decoration: line-through;
            font-style: normal;
          }
        }
      }
    }
    .check-item:nth-child(2n) {
      margin-right: 0;
    }
    .should-pay {
      font-size: 14px;
      color: #999;
      margin-bottom: 32px;
      span {
        color: #f66626;
      }
    }
    button {
      width: 390px;
      height: 46.6px;
      border-radius: 5px;
      background: #f66626;
      font-size: 16px;
      color: #fff;
      text-align: center;
      line-height: 46.6px;
      margin-bottom: 47.3px;
    }
  }
}
</style>
